import { Ref, useState, useRef, useMemo } from 'react';

import { getTableColumns } from './ModalReadColumns';
import { assetListManageServices } from '../services';
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { useDataSourceTable } from './useDataSourceTable';
import { SchemaManage } from '@/components/SchemaComponent';
/**
 * @OpenReadAssetModal
 * @param onClose 关闭弹窗组件
 * @returns
 */
export const OpenReadAssetModal: React.FC<Record<string, any>> = ({ curRes, onClose, userID }) => {
  /**弹框的ref*/
  const reloadLayoutRef: Ref<IOneModalRef> = useRef(null);
  const { getAssetListTableData, assetListData, loading, pagination, searchList } = assetListManageServices(curRes, userID);

  /** 管理页的ref */
  const MaterialManageViewRef: any = useRef();

  /** 保存表格展开行的key值 */
  const [tableExpantKeys, setTableExpantKeys] = useState<string[]>([]);

  /** 保存展示的表格数据 */
  const [dataSourceTable, setDataSourceTable] = useState<Record<string, any>[]>([]);

  /** 处理是否有子合同 */
  const { onExpandTable, childLoading } = useDataSourceTable(assetListData?.rows, dataSourceTable, setDataSourceTable, tableExpantKeys, setTableExpantKeys);

  /** 切换头部方法 */
  const onSwitch = (key: string | undefined | number, searchValues: any, params: any) => {
    getAssetListTableData({ ...params, ...searchValues });
  };

  /** 重置方法 */
  const onReset = (otherParams) => {
    getAssetListTableData({ ...otherParams });
  };

  /** 搜索方法 */
  const onSearch = (otherParams) => {
    getAssetListTableData({ ...otherParams });
  };

  /** 表格刷新数据 */
  const reloadTableData = () => {
    getAssetListTableData({});
  };

  /** 分页方法 */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    getAssetListTableData({ pageSize, current, ...params });
  };

  /** Table的columns集合 */
  const columns: Record<string, any>[] = useMemo(() => {
    return getTableColumns();
  }, [curRes]);

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={reloadLayoutRef}
        title={'名下资产'}
        width={document.body.clientWidth * 0.8}
        onCancel={onClose}
        footer={null}
        bodyStyle={{
          padding: '5px 10px',
          height: 600,
          // display: 'flex',
          // flexDirection: 'column',
        }}
        centered
      >
        <SchemaManage
          ref={MaterialManageViewRef}
          searchProps={{
            switchList: [], //头部切换列表
            searchList,
            onSwitch,
            onReset,
            onSearch,
          }}
          actionList={[]} // 操作按钮
          tableProps={{
            columns: columns,
            dataSource: dataSourceTable ? dataSourceTable : [],
            rowKey: 'id',
            loading: loading || childLoading,
            pagination: pagination as any,
            onPageChange: onPageChange,
            expandable: {
              onExpand: onExpandTable,
              expandedRowKeys: tableExpantKeys,
            },
          }}
        />
      </OneModal>
    </>
  );
};
